<template>
  <div class="app-container">
    <!--      {{this.$route.query.dictId}}-->

    <!--搜索栏-->
    <div class="app-container">
      <el-form v-show="showSearch" :model="queryParams" size="small" :inline="true" label-width="68px">
        <el-form-item label="字典名称" prop="dictType">
          <el-select v-model="queryParams.dictType">
            <el-option
              v-for="item in typeOptions"
              :key="item.dictId"
              :label="item.dictName"
              :value="item.dictType"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="字典标签" prop="dictLabel">
          <el-input
            v-model="queryParams.dictLabel"
            placeholder="请输入字典标签"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
            <el-option label="正常" value="0" />
            <el-option label="停用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!--按键-->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
          >导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-close"
            size="mini"
            @click="handleClose"
          >关闭</el-button>
        </el-col>
      </el-row>

      <!--字典数据列表-->
      <el-table ref="multipleTable" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="字典编码" align="center" prop="dictCode" />
        <el-table-column label="字典标签" align="center" prop="dictLabel">
          <template slot-scope="scope">
            <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{ scope.row.dictLabel }}</span>
            <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{ scope.row.dictLabel }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="字典键值" align="center" prop="dictValue" />
        <el-table-column label="字典排序" align="center" prop="dictSort" />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==0" primary>正常</el-tag>
            <el-tag v-if="scope.row.status==1" type="danger">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="字典类型">
            <el-input v-model="form.dictType" :disabled="true" />
          </el-form-item>
          <el-form-item label="数据标签" prop="dictLabel">
            <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
          </el-form-item>
          <el-form-item label="数据键值" prop="dictValue">
            <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
          </el-form-item>
          <el-form-item label="样式属性" prop="cssClass">
            <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
          </el-form-item>
          <el-form-item label="显示排序" prop="dictSort">
            <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
          </el-form-item>
          <el-form-item label="回显样式" prop="listClass">
            <el-select v-model="form.listClass">
              <el-option
                v-for="item in listClassOptions"
                :key="item.value"
                :label="item.label + '(' + item.value + ')'"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio v-model="form.status" label="0">正常</el-radio>
            <el-radio v-model="form.status" label="1">停用</el-radio>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

import qs from 'qs'
const axios = require('axios')

export default {
  data() {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,

      current: 1,
      size: 10,

      // 字典表格数据
      dataList: [],

      defaultDictName: '',
      // 默认字典类型
      defaultDictType: '',
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 数据标签回显样式
      listClassOptions: [
        {
          value: 'default',
          label: '默认'
        },
        {
          value: 'primary',
          label: '主要'
        },
        {
          value: 'success',
          label: '成功'
        },
        {
          value: 'info',
          label: '信息'
        },
        {
          value: 'warning',
          label: '警告'
        },
        {
          value: 'danger',
          label: '危险'
        }
      ],
      // 类型数据字典
      typeOptions: [],
      // 查询参数
      queryParams: {
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        dictLabel: [
          { required: true, message: '数据标签不能为空', trigger: 'blur' }
        ],
        dictValue: [
          { required: true, message: '数据键值不能为空', trigger: 'blur' }
        ],
        dictSort: [
          { required: true, message: '数据顺序不能为空', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    if (!this.queryParams.dictType) {
      this.queryParams.dictType = this.$route.query.dictType
      this.defaultDictType = this.$route.query.dictType
    }
    this.getList(this.current, this.size)
    this.getTypeOptions()
  },

  methods: {

    //  搜索
    handleQuery(current, size) {
      current = 1
      size = this.size
      this.getList(current, size)
    },

    //  添加按钮
    handleAdd() {
      this.title = '添加字典数据'
      this.reset()
      this.open = true
    },

    //  右侧修改
    handleEdit(row) {
      this.toggleSelection()
      this.title = '修改字典数据'
      this.form = JSON.parse(JSON.stringify(row))
      this.open = true
    },

    //  修改按钮
    handleUpdate() {
      this.title = '修改字典数据'
      this.open = true
    },

    //  删除数据
    handleDelete(row) {
      if (confirm('是否确认删除字典编码为' + row.dictCode + '的数据项？')) {
        //  批量删除
        if (!row.dictCode) {
          axios.delete('http://localhost:8080/intelligence_community/sys-dict-data/deleteSelect/' + this.ids)
            .then(res => {
              if (res.data == '删除成功') {
                this.getList(this.current, this.size)
              }
            })
        } else {
          axios.delete('http://localhost:8080/intelligence_community/sys-dict-data/deleteSelect/' + row.dictCode)
            .then(res => {
              if (res.data == '删除成功') {
                this.getList(this.current, this.size)
              }
            })
        }
      }
    },

    //  导出表单
    handleExport() {
      axios({
        method: 'get',
        url: 'http://localhost:8080/intelligence_community/sys-dict-data/downloadExcel',
        responseType: 'arraybuffer'
      })
        .then(res => {
          // 使用Blob对象将后端返回的Arraybuffer格式得数据转成blob类型的数据 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
          var b = new Blob([res.data], { type: 'application/vnd.ms-excel' })
          // 使用URL对象将blob类型的数据生成一个在线下载的链接
          var url = URL.createObjectURL(b)
          // 然后我们使用a标签进行下载
          var link = document.createElement('a')

          // 设置导出的文件名
          link.download = '字典数据'
          link.href = url
          // 点击获取文件
          link.click();

          (err) => {
            console.log(err)
          }
        })
    },

    //  返回字典分类页面
    handleClose() {
      this.$router.push('/nested/dictionary')
    },

    //  字典数据列表
    getList(current, size) {
      axios.post('http://localhost:8080/intelligence_community/sys-dict-data/page?current=' + current + '&size=' + size + '&dict_type=' + this.queryParams.dictType, qs.stringify(this.queryParams))
        .then(res => {
          this.dataList = res.data.records
          this.current = res.data.current
          this.total = res.data.total
          // this.queryParams.dictName = res.data.records[0].dictName;
        })
    },

    //  多选框选中数据
    handleSelectionChange(val) {
      this.ids = []
      this.single = true
      this.multiple = true
      if (val.length == 1) {
        this.single = false
        this.form = val[0]
      }
      if (val.length >= 1) {
        this.multiple = false
      }
      val.forEach(dicCode => {
        this.ids.push(dicCode.dictCode)
      })
    },

    //  提交数据按钮
    submitForm() {
      if (!this.form.dictCode) {
        //  添加
        axios.post('http://localhost:8080/intelligence_community/sys-dict-data/add',
          qs.stringify(this.form))
          .then(res => {
            if (res.data == '新增成功') {
              this.reset()
              this.getList(this.current, this.size)
            }
            this.open = false
          })
      } else {
        // 修改
        axios.put('http://localhost:8080/intelligence_community/sys-dict-data/update',
          this.form)
          .then(res => {
            if (res.data == '修改成功') {
              this.reset()
              this.getList(this.current, this.size)
            }
            this.open = false
          })
      }
    },

    //  取消全选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    // 取消按钮
    cancel() {
      this.open = false
    },

    // 表单重置
    reset() {
      this.form = {
        dictType: this.defaultDictType,
        dictCode: undefined,
        dictLabel: undefined,
        dictValue: undefined,
        cssClass: undefined,
        listClass: 'default',
        dictSort: 0,
        status: '0',
        remark: undefined
      }
    },

    //  重置按钮操作
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        dictName: this.defaultDictName,
        dictType: this.defaultDictType,
        status: undefined
      }
      this.handleQuery()
    },

    //  字典名称下拉
    getTypeOptions() {
      axios.get('http://localhost:8080/intelligence_community/sys-dict-data/typeOptions')
        .then(res => {
          res.data.forEach(dic => {
            this.typeOptions.push(dic)
          })
        })

      this.open = false
    },

    //  分页
    handleSizeChange(val) {
      this.size = val
      this.getList(this.current, val)
    },
    handleCurrentChange(val) {
      this.getList(val, this.size)
    }
  }
}
</script>

<style scoped>

</style>
